/*
 * @Author: yangrongxin
 * @Date: 2021-08-06 16:49:34
 * @LastEditors: yangrongxin
 * @LastEditTime: 2021-09-15 10:23:08
 */
import { useEffect } from 'react';
import { View, Image } from '@tarojs/components';
import Taro from '@tarojs/taro';
import { AtIcon } from 'taro-ui';
import styles from './index.module.less';

interface IVideoComponentProps {
  videoId: string; // 点播对应的视频id
  cover: string; // 对应的文章图片
  timeInterval: number; // 对应视频的时间
  articleId: string; // 文章id
  playVideoId?: ''; // 当前正在播放的参数id
}

const VideoComponent = (props: IVideoComponentProps) => {
  const { videoId, cover, articleId, playVideoId } = props;

  let videoInstance;

  useEffect(() => {
    if (!videoInstance) videoInstance = Taro.createVideoContext(videoId);
    if (playVideoId && playVideoId !== videoId) videoInstance?.pause();
    console.log('videoInstance', videoInstance);
    console.log('playVideoId', playVideoId);
  }, [playVideoId]);

  // const getVideoSrc = () => {
  //   // 跳转到最新的视频界面 播放视频
  //   Taro.navigateTo({
  //     url: `/pages/PatientEducation/components/VideoContent/index?videoId=${videoId}&articleId=${articleId}`,
  //   });
  // };

  const imageSrc = cover || '';

  return (
    <View className={styles.videoWapper}>
      {imageSrc && <Image src={imageSrc} mode="aspectFill" />}
      <AtIcon color="#fff" size="50" value="play" />
    </View>
  );
};

export default VideoComponent;
